<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
        <link rel="stylesheet" href="__PUBLIC__/css/nav.css"> 
        <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>    
        <script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>

    </head>
    <body>
        <table class="table panel-info bshadow" >
            <thead>
                <tr class="success">
                    <th>序号</th>
                    <th>设备名称</th>
                    <th>设备地址</th>
                    <th>二维码</th>
                    <th>删除</th>
                    <th>锁定设备位置（经纬度）</th>
                    <!--<th>设备负责人</th>-->
                </tr>
            </thead>
            <tbody>
            <volist name="list" id="vo">
                <tr>
                    <td>{$i}</td>
                    <td>{$vo.name}</td>
                    <td><a  onclick="addMarker('{$vo.logitude}','{$vo.latitude}')" data-toggle="modal" data-target="#mymap" >{$vo.place}</a>
                    </td>
                    <td>
                        <empty name="vo.qrcode">
                            <a href="__MODULE__/Equipment/qrcode/id/{$vo.equ_id}">生成二维码</a><else/><img style="height: 40px" onclick="cimage(this.src,'{$vo.qrcode|base64_encode}','{$vo.equ_id}')" data-toggle="modal" data-target="#myModal" src="__ROOT__/{$vo.qrcode}">
                        </empty>
                    </td>
                    <td>
                        <a href="__MODULE__/Equipment/deleteEquipment/number/{$vo.equ_id}" onclick="return confirm('确定删除 “{$vo.name}”吗？')">删除</a>
                    </td>
                    <td><empty name="vo.locking"><a href="__MODULE__/Equipment/locking/lock/{$vo.locking}/id/{$vo.equ_id}">立即解锁</a><else/><a href="__MODULE__/Equipment/locking/lock/{$vo.locking}/id/{$vo.equ_id}">锁定</a></empty></td>
            <!--<td><div class="shang">{$vo.useraccount}<div class="xiugai w"><a href="__MODULE__/Equipment/alterView/id/{$vo.equ_id}">修改</a></div></div></td>-->
            </tr>
            </volist>
        </tbody>
            <style>
                html, body, #container {
                    height: 100%;
                    width: 100%;
                }

                .amap-icon img,
                .amap-marker-content img{
                    width: 25px;
                    height: 34px;
                }

                .marker {
                    position: absolute;
                    top: -20px;
                    right: -118px;
                    color: #fff;
                    padding: 4px 10px;
                    box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
                    white-space: nowrap;
                    font-size: 12px;
                    font-family: "";
                    background-color: #25A5F7;
                    border-radius: 3px;
                }

                .input-card{
                    width: 32rem;
                    z-index: 170;
                }

                .input-card .btn{
                    margin-right: .8rem;
                }

                .input-card .btn:last-child{
                    margin-right: 0;
                }
            </style>
        <style>
            .shang{
                position: relative;
            }
            .xiugai{
                position:absolute;
                height: 50px;
                line-height: 50px;
                width: 80px;
                left: 20px;
                right: 0px;
                background-color: #e5e5e5;
                border: 1px solid #0066cc;
                display:none;
            }
            .shang:hover .w{
                display: block
            }
        </style>
        <script>
            function cimage(s,s1,s2){
                $('#image').attr("src",s);
                var str = '__MODULE__/Equipment/dow/file/'+s1+'/name/'+s2;
                $('#xiazai').attr("href",str);
            }
            function admin(it) {
                if ($(it).is(':checked')) {
                    ajax(it.value, 1)
                } else {
                    ajax(it.value, 0)
                }
            }
            function ajax(t, v) {
                // var val=jQuery("#"+obj).val();
                $.ajax({
                    url: "__ROOT__/Admin/User/admin", //这里指向的就不再是页面了，而是一个方法。
                    data: {
                        val: v,
                        tea: t
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (data) {
                        $(data).each(function (i) {
                            if (data.val == 0) {
                                alert('设置失败')
                            } else {
                                alert('设置成功')
                            }
                        });
                    }
                });
            }
        </script>
        <tfoot>
            <tr class="active">
                <td colspan="9">
                    <div class="left">
                        <i class="i"></i>
                        <input type="button" value="返回" class="btn btn-success" onclick="window.history.go(-1)">
                    </div>
                    {$page}
                </td>
            </tr>
        </tfoot>
    </table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					二维码
				</h4>
			</div>
			<div class="modal-body">
                            <img id="image" src="">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<a href='' id='xiazai' class="btn btn-primary">
					下载
				</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

        <!-- 地图 -->

        <div class="modal fade" id="mymap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <input type="hidden" id="id" name="id" value="" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="mymapLabel">
                            地图
                        </h4>
                    </div>
                    <div id="addr" style="height: 400px;width: 580px"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <script type="text/javascript"
                src="https://webapi.amap.com/maps?v=1.4.11&key=aa0816698554a1e30622d3487ba47ebf"></script>
        <script type="text/javascript">
            var marker, map = new AMap.Map("addr", {
                resizeEnable: true,
                center: [118.547859, 37.473035],
                zoom: 13
            });

            marker = new AMap.Marker({
                icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                position: [118.547859, 37.473035],
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(map);

            // 实例化点标记
            function addMarker(lng,lat) {

                    marker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: [lng,lat],
                    offset: new AMap.Pixel(-13, -30)
                });
                marker.setMap(map);
            }


        </script>
</body>
</html>